<template>
  <el-cascader v-model="deptIds" :options="specialOptions?specialOptions:options" :props="{value:'id',label:'deptName'}" :change-on-select="changeOnSelect" :show-all-levels="false" clearable></el-cascader>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Model, Emit, Prop, Watch } from 'vue-property-decorator';
import { Getter } from "vuex-class"

@Component({})
export default class SelectDepartment extends Vue {
  @Getter private departmentTreeData
  @Getter private getAllParentId
  @Getter private getDeptCodeById

  @Prop({
    type: Boolean,
    default: true
  })
  private changeOnSelect: boolean

  @Prop({
    type: String
  })
  private deptType: string;
  //接收其他需要特殊展示的部门
  @Prop()
  private specialOptions: any;

  @Model("on-select-change")
  private deptId: string

  @Emit("on-select-change")
  private emitDeptId(id, code) { }



  private get deptIds() {
    if (!this.deptId) return []
    return this.getAllParentId(this.deptId, this.deptType)
  }

  private set deptIds(val) {
    let id = ""
    let code = ""
    if (val.length) {
      id = val[val.length - 1]
      code = this.getDeptCodeById(id)
    }
    this.emitDeptId(id, code)
  }

  private mounted(){
    console.log(this.deptType,"this.deptType")
  }
  private get options() {
    return this.departmentTreeData(this.deptType)
  }

}
</script>

